<template>
  <div class="details">
    <div class="banner">
      <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(item,index) in banners" :key="index">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="way">
      <div class="way-item">
        <img src="../../assets/img/duigou.png" />
        <div>满￥69包送
          <span class="jiazi1">
            实际价联系客服
          </span>
        </div>
      </div>
      <!-- <div class="way-item">
        <img src="../../assets/img/duigou.png" />
        <div>正品保证</div>
      </div>
      <div class="way-item">
        <img src="../../assets/img/duigou.png" />
        <div>正品保险</div>
      </div> -->
    </div>
    <div class="xinxi">
      <p class="xinxi-p1">
      <span style="font-size:15px;">参考价:</span>{{details.shop_price}}</p>
      <p class="xinxi-p2">{{details.goods_name}}</p>
    </div>
    <div class="gray"></div>
    <div class="guige">
      <div class="guiges" v-if="details.sccj">
        <p class="guige-p1">厂家</p>
        <p class="guige-p2">{{details.sccj}}</p>
      </div>
      <div class="guiges" v-if="rule.length != 0">
        <p class="guige-p1">套装</p>
        <p class="guige-p2">{{firstrule.attr_value}}</p>
      </div>
    </div>
    <div class="grays"></div>
    <div class="pingjia">
      <div class="header">
        <div class="pingjia-l">评价（{{details.comment_count}}）</div>
        <img
          class="pingjia-r"
          @click="pingjialist(details.goods_id)"
          src="../../assets/img/ckgd.png"
        />
      </div>
      <div v-if="comment.length != 0">
        <div class="footer" v-for="(item,index) in comment" :key="index">
          <div class="user">
            <div class="user-l">
              <img class="user-touxiang" :src="item.avatar" />
              <div class="user-phone">
                <div class="phone">{{item.mobile_phone}}</div>
                <div class="xings" v-if="item.comment_rank == 1">
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                </div>
                <div class="xings" v-else-if="item.comment_rank == 2">
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                </div>
                <div class="xings" v-else-if="item.comment_rank == 3">
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                </div>
                <div class="xings" v-else-if="item.comment_rank == 4">
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                </div>
                <div class="xings" v-else-if="item.comment_rank == 5">
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                  <img class="xing" src="../../assets/img/mine/huangxing.png" />
                </div>
              </div>
            </div>
            <div class="user-r">{{item.add_time}}</div>
          </div>
          <div class="nr">{{item.content}}</div>
        </div>
        <div class="see-pingjia" @click="pingjialist(details.goods_id)">查看全部评价</div>
      </div>
      <div v-if="comment.length == 0">
        <p class="znawu">暂无评论</p>
      </div>
    </div>
    <div class="fuwenben">
      <p style="font-size:20px;">商品详情</p>
      <div id="xiangqing" class="xiangqing" v-html="details.goods_desc"></div>
      <div style="width:100%;height:50px;"></div>
    </div>
    <div class="goumai">
      <div class="goumai-box" style=" width:25%" @click="shoucang">
        <img
          :src="shoucangid==0?'../../../static/shoucang.png':'../../../static/hshoucang.png'"
          alt
        />
        <p>收藏</p>
      </div>
      <div class="goumai-box" style=" width:25%" @click="gouwuche">
        <div class="liang">{{chenum}}</div>
        <img src="../../assets/img/che.png" alt />
        <p>我的需求</p>
      </div>
      <div class="goumai-box mai" style=" width:50%" @click="tanbox">提交需求</div>
    </div>

    <!-- 弹框阴影 -->
    <div class="yinying" v-if="tan"></div>
    <div class="tan-box" v-if="tan">
      <div class="tan-head">
        <div class="tan-head-l">
          <img :src="firstbanner" alt />
          <div class="tan-name-qian">
            <p class="tan-name">{{details.goods_name}}</p>
            <p class="tan-qian">
              <!-- <span>￥</span> -->
              {{details.shop_price}}
            </p>
          </div>
        </div>
        <div class="tan-head-r" @click="cha">x</div>
      </div>
      <div class="xuanze">
        <p class="ze">套装</p>
        <div class="ze-item" w>
          <p
            @click="selectItem(item.goods_attr_id,index)"
            :class="{lvse:first == index}"
            v-for="(item,index) in rule"
            :key="index"
          >{{item.attr_value}}</p>
        </div>
        <div class="shuliang">
          <p class="ze">数量</p>
          <div class="jiajian">
            <p class="jian" @click="jian">-</p>
            <p class="zhi">{{num}}</p>
            <p class="jia" @click="jia">+</p>
          </div>
        </div>
      </div>
      <div class="queding" @click="queding">确定</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe).use(SwipeItem);
export default {
  data() {
    return {
      goods_id: "",
      details: "",
      firstbanner: "",
      banners: [],
      comment: [],
      firstrule: "",
      rule: [],
      shoucangid: 0,
      chenum: 0,

      // 弹框变量
      tan: false,
      first: -1,
      num: 1,
      attr_id: ""
    };
  },
  created() {
    this.goods_id = this.$route.query.goods_id;
    this.getdetails();
    this.getcomment();
    this.isshow();
    this.gounum();
  },
  mounted() {},
  beforeCreate() {
    // this.$islogin();
  },
  methods: {
    // 获取商品详情
    getdetails() {
      this.$get("api/gzh_index.php?action=goods_show", {
        id: this.goods_id,
        uid:
          localStorage.getItem("uid") != null ? localStorage.getItem("uid") : ""
      })
        .then(res => {
          console.log(res.data, "res");
          this.details = res.data;
          this.banners = this.details.img_arr;
          this.firstbanner = this.banners[0];
          this.rule = this.details.goods_attr;
          this.firstrule = this.rule[0];

          this.$nextTick(() => {
            let imgs1 = document.querySelectorAll("pre");
            // console.log(imgs);
            for (let i = 0; i < imgs1.length; i++) {
              // imgs[i].setAttribute('white-space','pre-wrap');
              imgs1[i].style.whiteSpace = "pre-wrap";
              // console.dir(imgs[i])
            }
            let imgs = document.querySelectorAll("#xiangqing>div>img");

            console.log(imgs, "imgs");
            for (let i = 0; i < imgs.length; i++) {
              let img_src = imgs[i].getAttribute("src");
              if (
                img_src.indexOf("http://") == -1 &&
                img_src.indexOf("https://") == -1
              ) {
                imgs[i].setAttribute(
                  "src",
                  "http://www.tjyyjkfwpt.com/" + img_src
                );
                imgs[i].setAttribute("width", "100%");
                imgs[i].setAttribute("height", "");
              }
            }
            let pimgs = document.querySelectorAll("#xiangqing>p>img");

            console.log(pimgs, "pimgs");
            for (let i = 0; i < pimgs.length; i++) {
              let img_src = pimgs[i].getAttribute("src");
              if (
                img_src.indexOf("http://") == -1 &&
                img_src.indexOf("https://") == -1
              ) {
                pimgs[i].setAttribute(
                  "src",
                  "http://www.tjyyjkfwpt.com/" + img_src
                );
                pimgs[i].setAttribute("width", "100%");
                pimgs[i].setAttribute("height", "");
              }
            }
            let tables = document.querySelectorAll("#xiangqing>table");
            // console.log(imgs, "imgs");
            for (let i = 0; i < tables.length; i++) {
              tables[i].setAttribute('width','100%')
            }
          });
        })
        .catch(err => {});
    },
    // 获取商品评论
    getcomment() {
      this.$get("api/gzh_index.php?action=goods_comment", {
        id: this.goods_id,
        page: 1,
        limit: 1
      })
        .then(res => {
          this.comment = res.data;
        })
        .catch(err => {});
    },
    // 判断是否收藏
    isshow() {
      this.$get("api/gzh_order.php?action=is_collection", {
        goods_id: this.goods_id,
        uid: localStorage.getItem("uid")
      })
        .then(res => {
          this.shoucangid = res.data.status;
        })
        .catch(err => {});
    },
    // 收藏
    shoucang() {
      if (this.shoucangid == 0) {
        this.$axios({
          method: "post",
          url: "api/gzh_mine.php?action=collect_goods",
          data: this.$qs.stringify({
            uid: localStorage.getItem("uid"),
            goods_id: this.goods_id
          }),
          headers: {
            // 'Content-Type': 'application/x-www-form-urlencoded'
            // 'content-Type' : 'application/json'
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        }).then(res => {
          if (res.data.error == 0) {
            this.shoucangid = 1;
          }
        });
      } else {
        this.$axios({
          method: "post",
          url: "api/gzh_mine.php?action=cancel_collect_goods",
          data: this.$qs.stringify({
            uid: localStorage.getItem("uid"),
            goods_id: this.goods_id
          }),
          headers: {
            // 'Content-Type': 'application/x-www-form-urlencoded'
            // 'content-Type' : 'application/json'
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        }).then(res => {
          if (res.data.error == 0) {
            this.shoucangid = 0;
          }
        });
      }
    },
    // 购物车数量
    gounum() {
      this.$get("api/gzh_order.php?action=card_list", {
        uid: localStorage.getItem("uid")
      })
        .then(res => {
          if (res.data.counts) {
            this.chenum = res.data.counts;
          } else {
            this.chenum = 0;
          }
        })
        .catch(err => {});
    },
    // 立即购买
    tanbox() {
      if (this.rule.length != 0) {
        this.tan = true;
      } else {
        this.$axios({
          method: "post",
          url: "api/gzh_order.php",
          data: this.$qs.stringify({
            action: "cart_add",
            goods_id: this.goods_id,
            number: this.num,
            uid: localStorage.getItem("uid"),
            attr_id: this.attr_id
          }),
          headers: {
            // 'Content-Type': 'application/x-www-form-urlencoded'
            // 'content-Type' : 'application/json'
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        }).then(res => {
          if (res.data.error == 0) {
            this.tan = false;
            this.$router.push({ name: "car" });
          }
        });
      }
    },
    // 查号
    cha() {
      this.tan = false;
    },
    // 选择规格
    selectItem(id, index) {
      this.first = index;
      this.attr_id = id;
    },
    // 确定
    queding() {
      if (this.attr_id) {
        this.$axios({
          method: "post",
          url: "api/gzh_order.php",
          data: this.$qs.stringify({
            action: "cart_add",
            goods_id: this.goods_id,
            number: this.num,
            uid: localStorage.getItem("uid"),
            attr_id: this.attr_id
          }),
          headers: {
            // 'Content-Type': 'application/x-www-form-urlencoded'
            // 'content-Type' : 'application/json'
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        }).then(res => {
          if (res.data.error == 0) {
            this.tan = false;
            this.$router.push({ name: "car" });
          }

          if (res.data.error == 1) {
            this.tan = false;
            this.$toast(res.data.msg);
          }
        });
      } else {
        this.$toast("请选择套餐");
      }
    },
    // 跳转评价列表
    pingjialist(id) {
      this.$router.push({ name: "comment-list", query: { goods_id: id } });
    },
    // 跳转购物车
    gouwuche() {
      this.$router.push({ name: "car" });
    },
    // 减
    jian() {
      if (this.num != 1) {
        this.num -= 1;
      } else {
        this.num = 1;
      }
    },
    // 加
    jia() {
      this.num += 1;
    }
  }
};
</script>

<style scoped>
.jiazi1{
  color: #e94451;
  font-size: 12px;
}
.details {
  width: 100%;
  height: calc(100% - 100px);
}
/* 轮播图 */
.banner {
  width: 100%;
  height: 719px;
}
.banner img {
  width: 100%;
  height: 719px;
  background: #ccc;
}

.way {
  width: 100%;
  height: 73px;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
}
.way-item {
  margin-right: 46px;
  font-size: 26px;
  color: #333;
  display: flex;
  align-items: center;
}
.way-item img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.xinxi {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.xinxi-p1 {
  font-size: 38px;
  color: #e94451;
  margin-top: 15px;
  margin-bottom: 15px;
}
.xinxi-p1 span {
  font-size: 28px;
}
.xinxi-p2 {
  font-size: 34px;
  color: #333;
  margin-bottom: 15px;
}
.xinxi-p3 {
  font-size: 26px;
  color: #999;
  margin-bottom: 15px;
}
.gray {
  width: 100%;
  height: 6px;
  background: #f7f7f7;
}
.guige {
  width: 100%;
  /* height: 128px; */
  border-bottom: 1px solid #f6f6f6;
}
.guiges {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
}
.just {
  justify-content: space-between;
}
.guiges-l {
  display: flex;
  align-items: center;
}
.guige-p1 {
  font-size: 24px;
  color: #ccc;
  margin-right: 32px;
}
.guige-p2 {
  font-size: 28px;
  color: #333;
}
.grays {
  width: 100%;
  height: 10px;
  background: #f7f7f7;
}
.pingjia {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #fafafa;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  width: 100%;
}
.pingjia-l {
  font-size: 30px;
  color: #333;
}
.pingjia-r {
  width: 15px;
  height: 22px;
}
.pingjia-r img {
  width: 15px;
  height: 22px;
}
.footer {
  width: 100%;
}
.user {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-l {
  display: flex;
  align-items: center;
}
.user-l .user-touxiang {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-right: 18px;
  background: #ccc;
  display: block;
}
.user-l .user-phone {
  /* height: 100px; */
}
.user-phone .phone {
  font-size: 24px;
  color: #333;
}
.user-phone .xings {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
}
.user-phone .xing {
  width: 12px;
  height: 12px;
  display: block;
  margin-right: 10px;
}
.user-r {
  font-size: 24px;
  color: #ccc;
}
.nr {
  color: #333;
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 30px;
}
.see-pingjia {
  width: 202px;
  height: 56px;
  margin: auto;
  border: 1px solid #e5e5e5;
  border-radius: 28px;
  font-size: 28px;
  color: #333;
  line-height: 56px;
  text-align: center;
  margin-bottom: 20px;
}
.fuwenben {
  width: 690px;
  max-width: 690px;
  margin-bottom: 100px;
  margin: auto;
  /* padding: 0 30px; */
  box-sizing: border-box;
}
.xiangqing {
  font-size: 30px;
  /* word-wrap: break-word; */
  margin-top:20px;
}

pre {
  word-wrap: break-word;
}

.xiangqing .fuwenben p {
  width: 690px;
  max-width: 690px;
  /* padding: 0 30px; */
  box-sizing: border-box;
  height: 80px;
  line-height: 80px;
  color: #333;
  font-size: 30px;
}
.fuwenben div {
  width: 690px;
  max-width: 690px;
  margin: 30px auto;
  /* padding: 0 30px; */
  box-sizing: border-box;
}

/* 购买 */
.goumai {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 750px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.goumai-box {
  width: 32%;
  height: 100px;
  text-align: center;
  position: relative;
}
.goumai-box .liang {
  position: absolute;
  right: 75px;
  top: 2px;
  width: 36px;
  height: 30px;
  font-size: 24px;
  border-radius: 20px;
  background: #ff3054;
  color: #fff;
  text-align: center;
  line-height: 30px;
}
.goumai-box img {
  width: 30px;
  height: 30px;
  display: block;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 8px;
}
.goumai-box p {
  font-size: 26px;
  color: #ccc;
}
.mai {
  background: #06a255;
  line-height: 100px;
  text-align: center;
  font-size: 36px;
  color: #feffff;
}

/* 弹框阴影 */
.yinying {
  width: 100%;
  height: 100vh;
  background: #000;
  opacity: 0.5;
  position: fixed;
  left: 0;
  top: 0;
}
.tan-box {
  width: 100%;
  height: 800px;
  background: #fff;
  border-radius: 15px 15px 0 0;
  position: fixed;
  left: 0;
  bottom: 0;
}
.tan-head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
}
.tan-head-l {
  display: flex;
  align-items: center;
  height: 200px;
}
.tan-head-l img {
  width: 185px;
  height: 185px;
  margin-right: 28px;
  background: #000;
}
.tan-name-qian .tan-name {
  font-size: 30px;
  color: #333;
}
.tan-name-qian .tan-qian {
  font-size: 32px;
  color: #c94451;
  margin-top: 38px;
}
.tan-head-r {
  font-size: 44px;
  color: #8b8b8b;
}
.xuanze {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.xuanze .ze {
  width: 100%;
  font-size: 28px;
  color: #333;
  margin-top: 25px;
}
.xuanze .ze-item {
  width: 100%;
  height: 240px;
  display: flex;
  /* align-items: center; */
  align-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: scroll;
}
.xuanze .ze-item p {
  height: 55px;
  padding: 0 15px;
  /* background-color:#F7F7F7; */
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 28px;
  color: #333;
  line-height: 55px;
  margin-right: 20px;
  margin-top: 25px;
}
.xuanze .ze-item .lvse {
  height: 55px;
  padding: 0 15px;
  background-color: rgba(43, 192, 118, 0.3);
  border: 1px solid #06a255;
  border-radius: 20px;
  font-size: 28px;
  color: #299d5a;
  line-height: 55px;
  margin-right: 20px;
  margin-top: 25px;
}
.shuliang {
  width: 100%;
  /* margin-top: 50px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jiajian {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.jiajian .jian {
  font-size: 40px;
  color: #a4a4a4;
}
.jiajian .zhi {
  width: 100px;
  height: 50px;
  font-size: 28px;
  color: #333;
  text-align: center;
  line-height: 50px;
  background: #f0f0f0;
  margin: 0 20px;
}
.jiajian .jia {
  font-size: 40px;
  color: #3e3e3e;
}
.queding {
  width: 100%;
  height: 98px;
  background: rgba(6, 162, 85, 1);
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(254, 255, 255, 1);
  line-height: 98px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
}
.znawu {
  font-size: 28px;
  text-align: center;
  margin-bottom: 20px;
}
</style>
<style>
.banner .demo-swipe .custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
